各位好，小弟為前端初學者，最近剛學完JQuery的一些基礎，想要將自己所理解的知識，轉化為文章
分享出來，以日後忘記時，還能在文章中查找，釐清自己當時的想法，而有什麼錯誤，歡迎指正!希望大家多多包涵，謝謝!

JQ簡述:

JQ和JS的關係
JS是什麼? JS是一門程式語言
而JQ僅僅是基於JS的一個函式庫，JQ可理解為就是開發JS的一個工具。
為什麼要學JQuery?簡單，粗暴 沒有兼容性問題

使用JQuery的步驟：

1.下載JQuery文檔 通常會有包含兩種

一種為jquery.1.12.4.min.js(壓縮版)

一種為jquery.1.12.4.js

功能基本上一樣，都能引入用，差別在於，壓縮版將注釋、換行、空格等刪除，而未壓縮版則無，較易閱讀。
開發環境用，未壓縮版，因為易閱讀，且不受流量大影響，而生產環境(對客戶)用，壓縮版，因為越小越省流量。

2. 引入JQuery文件

3. 入口函數 功能實現

入口函數寫法：

        window.onload = function () {
            console.log('js入口函數寫法');
        }
        $(document).ready(function () {
            console.log('jq入口函數第一種寫法');
        });
        $(function () {
            console.log('jq入口函數第二種寫法');
        });

當其他文檔也有$符號的數據，且後引入的話jq的$就會被覆蓋 如果想要同時寫jq，但又想引用其他文檔$的數據，可用jq的jQuery替代$來引入jquery

jQuery(function () {
    console.log('jq入口函數第三種寫法');
 });

jQuery物件與DOM物件

區別：方法不能混用

js物件不能呼叫jq物件的方法?

不行，只有jq物件能呼叫自己的方法

jq物件能不能呼叫JS物件的方法?

不行，只有DOM物件能呼叫自己的方法，如同衣服不能自己產生洗衣機的功能。

DOM物件的缺點

1.需要一個個操作且需要遍歷較為麻煩
2.有兼容性問題
3.事件會被覆蓋等等

什麼是DOM物件(JS物件):

使用JS的方式獲取到的元素就是JS物件（DOM物件）

var cloth = document.getElementById("cloth");
cloth.style.backgroundColor = "pink";

什麼是JQ物件：

使用jq的方式獲取到的元素就是JQ物件，且JQ物件包含DOM物件

JQ物件就是，裡面放了一堆DOM(JS)物件，及一堆方法，而我們不用去遍歷那些對象，他們自己會遍歷，然後需要什麼操作，在呼叫自身的方法去處理。

   var $li = $("li"); // 設置一個名稱為$li的變數,並以JQ方式獲取所有li標籤元素,也就是將其設為JQ物件
   console.log($li); // 獲取到偽陣列
   // jQuery.fn.init(4) [li#cloth, li, li, li, prevObject: jQuery.fn.init(1), context:   
   // document, selector: "li"]
   // 0: li#cloth
   // 1: li
   // 2: li
   // 3: li
   // length: 4 
   // 以上為一個標準的偽陣列物件

DOM無法呼叫jQuery物件的方法：為什麼?

因為是兩個不同物件，方法自然也不同

DOM物件呼叫jQuery物件的方法。需要把DOM物件轉換成jQuery物件。DOM物件轉變成jQuery物件(把變數放進$())，即可呼叫JQ物件的方法

var cloth = document.getElementById("cloth"); 
$(cloth).text("我轉化成JQ物件,我呼叫JQ方法");

jQuery物件怎麼轉換成DOM物件（從JQ物件取DOM物件出來）

第一種方法 [index]

var $li = $("li");
$li[1].style.backgroundColor = "red";

第二種方法,get(index)功能同等第一種,推薦使用第一種即可

$li.get(1).style.backgroundColor = "yellow";

$的本質

$其實就是一個函數,用$時記得加小括號()，參數不同,功能不同

第一種參數為function，就為入口函數

   $(function () {
   });

第二種參數為DOM物件，可將其轉成JQ物件

$(DOMOnject)

舉入口函數為例,ready為JQ的方法,而document為JS的物件,基本上是不能引用ready方法
但由於document包在$裡面,將其轉成JQ物件,所以才可引用

  $(document).ready(function () {

  });

第三種參數為字符串,用來找元素,物件

$('div') $('#bt') $('.bt')

第一次排版這種學習分享文章，還有許多進步的空間，也謝謝各位的觀看！